<template>
  <div class="bg-[#F7F7F7]">
    <div class="max-w-[90rem] mx-auto">
      <!-- 图片   -->
      <div class="relative aspect-video !z-0 !block bg-fixed">
        <!-- background: linear-gradient( 180deg, rgba(247,247,247,0) 0%, #F7F7F7 100%) -->
        <!-- cover -->
        <img
          :src="$globalFn.imgPrefixUrl(newsdetail.info.cover)"
          class="object-cover size-full !z-[-1] block"
          alt="Article cover image"
          title="News article cover"
        />
        <div
          class="size-full absolute inset-0 bg-gradient-to-b from-[#F7F7F7]/0 form-70% via-[#f7f7f7] via-70% to-[#f7f7f7] to-100% !z-[1] hidden lg:flex"
        ></div>
      </div>
      <div class="max-w-7xl mx-auto lg:-mt-[14.375rem] !z-40 flex flex-col">
        <!-- 标题  lg:-mt-[9.375rem] -->
        <div class="flex flex-col lg:py-[2.5rem] py-[1rem] z-50 lg:gap-[1.625rem] max-lg:gap-[.8rem] lg:px-[0] max-lg:px-[1rem]">
          <h1 class="font-medium lg:text-[2rem] max-lg:text-[1rem] text-black lg:text-center line-clamp-1">
            {{ newsdetail.info.title }}
          </h1>
          <div class="lg:justify-center flex justify-start items-center">
            <div class="lg:size-8 size-6 overflow-hidden rounded-full">
              <img
                loading="lazy"
                v-lazy="newsdetail.info.author.avatar"
                class="size-full object-cover"
                alt="Author avatar"
                title="Article author profile"
              />
            </div>
            <span class="font-500 text-[.875rem] text-black/50 ml-[.25rem]">
              {{ newsdetail.info.author.nickname }}
            </span>
            <div class="px-[.9375rem]">
              <i class="w-[.0625rem] h-[.625rem] block border-[.0625rem] border-solid border-[#979797]"> </i>
            </div>
            <span class="font-500 text-[.875rem] text-[#999999]">
              {{ newsdetail.info.publish_time_text }}
            </span>
          </div>
        </div>
        <!-- 文章 -->
        <!-- :class="k == 7 ? 'selectbackground ' : 'text-[#666666]'" -->
        <div class="lg:px-0 z-50 px-4">
          <div class="bg-white border rounded-[1.25rem]">
            <div class="lg:grid-cols-3 grid z-50 grid-cols-1">
              <div class="lg:flex hidden col-span-1 p-8 w-full border-r">
                <div class="relative w-full">
                  <div class="top-[6rem] sticky">
                    <div class="hovdrs flex gap-3 justify-between items-center py-3 pr-4 w-full cursor-pointer" v-for="(i, k) in h2Texts" :key="k">
                      <div class="flex gap-3 items-center">
                        <nuxt-link class="font-medium text-[0.88rem] flex-1 capitalize" :to="href(i)">
                          {{ i.text }}
                        </nuxt-link>
                      </div>
                      <div class="font-semibold text-[0.88rem] text-[#b3b3b3]">
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </div>
                    <div class="mt-3">
                      <LazyH5share type="1"></LazyH5share>
                    </div>
                  </div>
                </div>
              </div>
              <div class="lg:col-span-2 col-span-1">
                <div class="w-full !relative">
                  <div class="!top-[6rem] !sticky">
                    <div class="lg:p-8 p-4">
                      <div class="simditor">
                        <div class="simditor-body overflow-hidden">
                          <div v-html="content" class="rich-text" ref="richTextContainer" style="overflow: hidden"></div>
                        </div>
                      </div>
                    </div>
                    <!-- 更多文章-->
                    <div class="lg:p-8 p-0 border-t max-lg:p-[1rem]">
                      <div class="grid grid-cols-2 lg:gap-[2.5rem] max-lg:gap-[1rem] lg:py-[2.125rem] max-lg:lg:px-[0]">
                        <!-- 上一篇帖子 -->
                        <NuxtLink class="flex flex-col gap-[1.25rem]" v-if="newsdetail.pre" :to="toDetail(newsdetail.pre)">
                          <div class="gap-[.5rem] flex max-lg:flex-col cursor-pointer">
                            <div class="lg:w-1/3 border w-full rounded-[.25rem] flex-none overflow-hidden aspect-video">
                              <img
                                loading="lazy"
                                v-lazy="$globalFn.imgPrefixUrl(newsdetail.pre.cover || '', 'article')"
                                class="size-full object-cover"
                                alt="Previous article thumbnail"
                                title="Previous article preview"
                              />
                            </div>
                            <p class="font-normal flex-1 overflow-hidden lg:text-[1rem] text-[.8em] text-[#262626] line-clamp-2 lg:text-left">
                              {{ newsdetail.pre.title }}
                            </p>
                          </div>
                        </NuxtLink>
                        <!-- 下一篇帖子 -->
                        <NuxtLink class="flex flex-col gap-[1.25rem]" v-if="newsdetail.next" :to="toDetail(newsdetail.next)">
                          <div class="flex gap-[.5rem] cursor-pointer max-lg:flex-col">
                            <div class="lg:w-1/3 w-full aspect-video rounded-[.25rem] flex-none overflow-hidden border">
                              <img
                                v-lazy="$globalFn.imgPrefixUrl(newsdetail.next.cover)"
                                class="size-full object-cover"
                                loading="lazy"
                                alt="Next article thumbnail"
                                title="Next article preview"
                              />
                            </div>
                            <p class="font-400 lg:text-[1rem] text-[.8em] text-[#262626] line-clamp-2 w-full lg:text-left">
                              {{ newsdetail.next.title }}
                            </p>
                          </div>
                        </NuxtLink>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 更多推荐 -->
        <div class="flex flex-col lg:px-[0] max-lg:px-[1rem] max-lg:mb-4 max-lg:mt-4" v-if="newsdetail.more.length">
          <div class="flex lg:justify-center lg:mb-[1.875rem] max-lg:mb-[1rem] lg:mt-[3.125rem]">
            <h2 class="font-600 text-[1rem] lg:text-[1.5rem] lg:text-[#666666] text-black">
              {{ $t('pages.more') }}
            </h2>
          </div>
          <!-- pc -->
          <div class="lg:block hidden overflow-hidden mb-4">
            <div v-swiper:mySwiper="swiperOption" class="">
              <div class="swiper-wrapper">
                <NuxtLink
                  class="swiper-slide flex flex-col group overflow-hidden border rounded-[.5rem] cursor-pointer"
                  v-for="(i, index) in newsdetail.more"
                  :key="index"
                  :to="toDetail(i)"
                >
                  <div class="h-[10.1875rem] rounded-[.5rem] flex-none overflow-hidden">
                    <img
                      :src="$globalFn.imgPrefixUrl(i.cover || '', 'article')"
                      class="size-full group-hover:scale-110 object-cover duration-300"
                      loading="lazy"
                      alt="Related article thumbnail"
                      title="More article preview"
                    />
                  </div>
                  <div class="p-[1rem] flex flex-col gap-[.5rem]">
                    <h2 class="font-bold text-[.875rem] text-[#262626] line-clamp-1">
                      {{ i.title }}
                    </h2>
                    <h3 class="font-medium text-[.75rem] text-[#262626] line-clamp-1">
                      {{ i.description }}
                    </h3>
                    <span class="font-medium text-[.75rem] text-[#CCCCCC]">
                      {{ i.publish_time_text }}
                    </span>
                  </div>
                </NuxtLink>
              </div>
              <div
                class="swiper-button-prev hidden lg:flex z-50 justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full"
              >
                <i class="el-icon-arrow-left text-[1.25rem] text-white"></i>
              </div>
              <div
                class="swiper-button-next hidden lg:flex z-50 justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full"
              >
                <i class="el-icon-arrow-right text-[1.25rem] text-white"></i>
              </div>
            </div>
          </div>
          <!-- 移动端 -->
          <div class="max-lg:flex hidden gap-[1rem] overflow-x-scroll">
            <NuxtLink
              class="flex flex-col rounded-[.5rem] cursor-pointer w-1/2 flex-none gap-1"
              v-for="(i, index) in newsdetail.more"
              :key="index"
              :to="toDetail(i)"
            >
              <div class="aspect-video rounded-[0.5rem] flex-none overflow-hidden">
                <img v-lazy="$globalFn.imgPrefixUrl(i.cover || '', 'article')" class="size-full object-cover" :alt="i.cover" />
              </div>
              <div class="flex flex-col gap-[.5rem]">
                <div class="font-semibold text-[.875rem] text-[#262626] line-clamp-1">
                  {{ i.title }}
                </div>
                <div class="font-medium text-[.75rem] text-[#262626] line-clamp-2" v-if="i.description">
                  {{ i.description }}
                </div>
                <span class="font-medium text-[.75rem] text-[#CCCCCC]">{{ i.publish_time_text }}</span>
              </div>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsPage',
    head() {
      return {
        title: this.newsdetail.info.seo_title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.newsdetail.info.seo_description
          }
        ]
      }
    },
    data() {
      return {
        // swiper轮播图配置
        swiperOption: {
          touchEnabled: true, // 触摸滑动
          touchRatio: 1, // 触摸比例
          speed: 1000, // 切换速度
          loop: true, // 循环播放
          loopPreventsSlide: true, // 防止循环时卡顿
          autoplay: true, // 自动播放
          delay: 2000, // 自动播放间隔时间
          slidesPerView: 3, // 同时显示的slide数量
          spaceBetween: 86, // slide之间的间距
          navigation: {
            nextEl: '.swiper-button-next', // 下一页按钮
            prevEl: '.swiper-button-prev' // 上一页按钮
          }
        },
        newsdetail: {}, // 新闻详情数据
        content: '', // 文章内容
        h2Texts: [] // 文章h2标题列表
      }
    },
    created() {
      let content = this.newsdetail.info.content
      this.richText = content
      this.content = this.centerImagesInContent(content)
    },
    mounted() {
      if (process.client) {
        this.extractH2Headings()
      }
    },
    async asyncData({ app, params }) {
      let res = await app.$axios.get(`/api/news/info?code=${params.code}`)
      return {
        newsdetail: res,
        params: params
      }
    },
    methods: {
      href(i) {
        return '#' + i.id
      },
      extractH2Headings() {
        // 在组件挂载后执行以下操作
        // 通过 ref 获取渲染富文本的 DOM 元素
        const richTextContainer = this.$refs.richTextContainer
        // 使用 querySelectorAll 方法选取所有的 h2 标签
        const h2Elements = richTextContainer.querySelectorAll('h2')
        this.h2Texts = Array.from(h2Elements)
          .map((h2, index) => {
            // 为每个 h2 标签添加以索引为 id 的属性
            h2.id = `h2-${index}`
            // 返回 h2 标签的文本内容
            return {
              text: h2.textContent,
              id: `h2-${index}`
            }
          })
          .filter(Boolean)
      },
      scrollToHeading(id) {
        const element = document.getElementById(id)
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' })
        }
      },
      centerImagesInContent(content) {
        // 正则匹配富文本中的所有 <img> 标签
        const imgRegex = /<img[^>]*>/gi
        // 替换匹配到的 <img> 标签，添加居中样式
        const centeredContent = content.replace(imgRegex, match => {
          // 检查是否已经有 style 属性
          if (match.toLowerCase().includes('style=')) {
            // 如果已经有 style 属性，追加样式
            return match.replace(/style=["'][^"']*["']/i, styleMatch => {
              const newStyle = styleMatch.slice(0, -1) + ' display: block; margin: 0 auto;"'
              return newStyle
            })
          } else {
            // 如果没有 style 属性，添加样式
            const newImgTag = match.replace(/(>)/, ' style="display: block; margin: 0 auto;"$1')
            return newImgTag
          }
        })
        return centeredContent
      },
      // 去新闻详情页
      toDetail(item) {
        let code = item.code
        code = code.replace(/\s+/g, '-')
        let path = this.localePath(`/news/${code}`)
        return path
      }
    }
  }
</script>
<style lang="less" scoped>
  // @import "~/assets/css/simditor.css";
  .banxin {
    @apply max-w-7xl;
  }
  .swiper-button-prev {
    background-image: none;
  }
  .swiper-button-next {
    background-image: none;
  }
  .selectbackground {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffebe5 100%);
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
  }
  .hovdrs:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #efefef 100%);
    border-radius: 0 32px 32px 0;
    color: #ff4e33 !important;
    @apply duration-300 transition-colors;
  }
  .vue-sticky-el {
    // width: 100% !important;
  }
</style>
